<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="css/pintuer.css">
        <link rel="stylesheet" href="css/admin.css">
        <script src="js/jquery.js"></script>
        <script src="js/pintuer.js"></script>
        <script src="/js/vuejs-2.5.16.js"></script>
        <script src="/js/axios-0.18.0.js"></script>
        <script src="/js/laydate/laydate.js"></script>
    </head>
    <body>
        <div class="panel admin-panel" id="moviesDiv">
            <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加题目内容</strong></div>
            <div class="body-content">
                <form method="post" class="form-x">

                    <div class="form-group">
                        <div class="label">
                            <label>灵魂题目：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="title.titleName" name="title"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>题目分类：</label>
                        </div>
                        <div class="field">
                            <select name="cid" class="input w50" v-model="title.cid">
                                <option value="">请选择分类</option>
                                <option value="1">初级灵魂测试题</option>
                                <option value="2">中级灵魂测试题</option>
                                <option value="3">高级灵魂测试题</option>
                            </select>
                            <div class="tips"></div>
                        </div>
                    </div>


                    <!--<div class="field" v-for="(option,index) in title.optinsList">
                        <input type="hidden" name="id" :value="options.id">
                        <div class="form-group">
                            <div class="label">
                                <label v-if="index==0">灵魂选项A：</label>
                                <label v-if="index==1">灵魂选项B：</label>
                                <label v-if="index==2">灵魂选项C：</label>
                                <label v-if="index==3">灵魂选项D：</label>
                                <label v-if="index==4">灵魂选项E：</label>
                                <label v-if="index==5">灵魂选项F：</label>
                                <label v-if="index==6">灵魂选项G：</label>
                                <label v-if="index==7">灵魂选项H：</label>
                                <label v-if="index==8">灵魂选项I：</label>
                            </div>

                            <input type="text" class="input w50" name="url" :value="option.options"/>
                            <div class="tips"></div>
                        </div>
                    </div>-->
                    <div class="form-group" v-for="(option,index) in title.optionsText">
                        <div class="label">
                            <!--<label>选项列表：</label>-->
                            <label v-if="index==0">灵魂选项A：</label>
                            <label v-if="index==1">灵魂选项B：</label>
                            <label v-if="index==2">灵魂选项C：</label>
                            <label v-if="index==3">灵魂选项D：</label>
                            <label v-if="index==4">灵魂选项E：</label>
                            <label v-if="index==5">灵魂选项F：</label>
                            <label v-if="index==6">灵魂选项G：</label>
                            <label v-if="index==7">灵魂选项H：</label>
                            <label v-if="index==8">灵魂选项I：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="option.options" name="director"/>
                            <div class="tips"></div>
                        </div>
                    </div>

                        <div class="clear"></div>
                        <div class="form-group">
                            <div class="label">
                                <label></label>
                            </div>
                            <div class="field">
                                <a class="button bg-main icon-check-square-o" @click="save()"> 提交</a>
                            </div>
                        </div>

                    <!-- <div class="form-group">
                         <div class="label">
                             <label>选项列表：</label>
                         </div>
                         <div class="field">
                             <input type="text" class="input w50" v-model="movies.director" name="director"/>
                             <div class="tips"></div>
                         </div>
                     </div>-->

                    <!--<div class="form-group">
                        <div class="label">
                            <label>主要演员：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="movies.actors" name="actors"/>
                            <div class="tips"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label">
                            <label>播放链接：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="movies.url" name="url"/>
                            <div class="tips"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label">
                            <label>影视图片：</label>
                        </div>
                        <div class="field">
                            <input type="file" id="url1" name="picPath" class="input tips" style="width:25%; float:left;"
                                   data-toggle="hover" data-place="right" @change="uploadFile()"/>
                            <div class="tipss">图片尺寸：1300*500</div>
                        </div>
                    </div>

                    <div class="form-group" v-if="movies.picPath">
                        <div class="label">
                            <label>原图片：</label>
                        </div>
                        <div class="field">
                            <img v-bind:src="movies.picPath" alt="" width="300" height="100"/>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="form-group">
                        <div class="label">
                            <label>影视描述：</label>
                        </div>
                        <div class="field">
                            <textarea class="input" style="height:250px; border:1px solid #ddd;" v-model="movies.contentDesc"
                                      name="contentDesc"></textarea>
                            <div class="tips"></div>
                        </div>
                    </div>

                    <div class="clear"></div>

                    <div class="form-group">
                        <div class="label">
                            <label>影视关键字：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input" v-model="movies.keyword" name="keyword"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label">
                            <label>排序：</label>
                        </div>
                        <div class="field">
                            <input type="number" class="input w50" v-model="movies.orderNo" name="orderNo"/>
                            <div class="tips"></div>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="label">
                            <label>上映时间：</label>
                        </div>
                        <div class="field">
                             <input type="date"  class="input w50" v-model="movies.showTime" name="showTime"/>
                        </div>
                    </div>-->


                </form>
            </div>
        </div>
        <script type="text/javascript">
            const app = new Vue({
                el: '#moviesDiv',
                data: {
                    title: {},//
                    optinsList: []
                },
                methods: {
                    save() {
                        axios.post("/soul/update", this.title).then(resp => {
                            if (resp.data == "1") {
                                alert("操作成功")
                                location.href = "/title_list.html"
                            }
                        })
                    },
                    findById(id) {
                        axios.get("/soul/optins?id=" + id).then(resp => {
                            this.title = resp.data;
                        })
                    }
                },
                created() {
                    let id = location.search.split("=")[1];
                    this.findById(id)
                }
            })
        </script>

        <script>
            lay('#version').html('-v' + laydate.v);
            //执行一个laydate实例
            laydate.render({
                elem: '#showTime' //指定元素
            });
        </script>
        <script src="/js/verify.js"></script>
    </body>
</html>